<template>
  <div>
    <x-header :left-options="{showBack: false}">我的</x-header>
    <div>
      <div style="padding: 10px;height: 100px;line-height: 100px;background-color: #fff;">
        <flexbox @click.native="greet()">
          <flexbox-item :span="3">
            <img src="../assets/user_pic_default.png" style="display: block;margin: 0 auto;width: 80px;height: 80px;"/>
          </flexbox-item>
          <flexbox-item :span="10">
            <h4>雄兵传奇</h4>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <group>
      <cell-box is-link>
        分享
      </cell-box>
      <cell title="邀请好友" value="3" is-link></cell>
      <cell-box is-link>
        帮助中心
      </cell-box>
      <cell-box is-link>
        联系客服
      </cell-box>

    </group>


    <tabbar style="position: fixed">
      <tabbar-item link="/">
        <img slot="icon" src="../assets/home-normal.png">
        <img slot="icon-active" src="../assets/home-sel.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item link="/order">
        <img slot="icon" src="../assets/cart.png">
        <img slot="icon-active" src="../assets/cart_sel.png">
        <span slot="label">订单</span>
      </tabbar-item>
      <tabbar-item selected>
        <img slot="icon" src="../assets/account.png">
        <img slot="icon-active" src="../assets/account_sel.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>

</template>

<script>
  import {Tabbar, TabbarItem, Flexbox, FlexboxItem} from 'vux'

  export default {
    name: 'mine',
    components: {
      Tabbar,
      TabbarItem,
      Flexbox,
      FlexboxItem
    }
  }
</script>

<style scoped>

</style>
